<template>
  <div class="song-sheet">
    <div class="w1200">
      <div class="sheet-main">
        <div class="sheet-main-top">
          <div class="main-top-img">
            <el-image :src="songSheetInfo.coverImgUrl"></el-image>
          </div>
          <div class="main-top-info">
            <h3>{{ songSheetInfo.name }}</h3>
            <div class="user-info">
              <el-image :src="songSheetInfo.creator.avatarUrl"></el-image>
              <span>{{ songSheetInfo.creator.nickname }}</span>
              <span class="c9">{{
                $util.getSongDate(songSheetInfo.createTime, true)
              }}</span>
            </div>
            <div class="tag">
              <em>#{{ songSheetInfo.tags[0] }}</em>
              <em>#{{ songSheetInfo.tags[1] }}</em>
              <em>#{{ songSheetInfo.tags[2] }}</em>
            </div>
            <div class="icon c9">
              <span
                ><i class="el-icon-headset"></i>
                {{ $util.handleNum(songSheetInfo.playCount) }}次</span
              >
              <span
                ><i class="el-icon-star-off"></i>
                {{ $util.handleNum(songSheetInfo.subscribedCount) }}</span
              >
              <span
                ><i class="el-icon-chat-dot-round"></i>
                {{ songSheetInfo.commentCount }}</span
              >
            </div>
            <h5>歌单简介</h5>
            <p class="c9 descript">{{ songSheetInfo.description }}</p>
          </div>
        </div>
        <div class="sheet-main-bottom">
          <div class="rm-play">
            <div class="list">
              <h2>歌曲列表</h2>
              <span>100</span>
            </div>
            <div class="play-collect">
              <div class="btn" @click="rightAwayPlay">
                <i
                  :class="[
                    isPlayed ? 'el-icon-video-pause' : 'el-icon-caret-right',
                  ]"
                ></i
                >播放全部
              </div>
              <div class="btn collect">
                <i class="el-icon-star-off"></i>收藏
              </div>
            </div>
          </div>
          <div class="song">
              <song-list class="songlist" :songList="playlistSong"></song-list>
          </div>
        </div>
      </div>
      <div class="sheet-aside">
        <div class="sheet-asidemain">
          <h4>喜欢这个歌单的人</h4>
          <div class="asidemain-subScriber">
            <el-image
              :src="item.avatarUrl"
              v-for="(item, index) in subScribers"
              :key="item.userId + '' + index"
            ></el-image>
          </div>
        </div>
        <div class="sheet-asidemain">
          <h4>相关歌单推荐</h4>
          <ul class="related">
            <li v-for="(item,index) in related" :key="item.id+''+index">
              <div class="am-left">
                  <el-image :src="item.coverImgUrl"></el-image>
              </div>
              <div class="am-right">
                <p>{{ item.name |handleFont }}</p>
                <p>By、{{ item.creator.nickname }}</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="sheet-asidemain">
          <h4>歌单评论</h4>
          <ul class="comment">
              <li v-for="(item,index) in playlistComments" :key="item.commentId+''+index">
                  <div class="comment-img">
                      <el-image :src="item.user.avatarUrl"></el-image>
                  </div>
                  <div class="comment-userinfo">
                      <div class="userinfo-title">
                          <h5>{{item.user.nickname}} <span>{{item.timeStr}}</span></h5>
                      </div>
                      <p class="userinfo-comment">
                          {{item.content}}
                      </p>
                  </div>
              </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters,mapMutations,mapActions } from "vuex";
import SongList from '@/components/common/Song-list.vue'
import {formatSongInfo} from '@/utils/songs'
export default {
    components:{
        SongList
    },
  data() {
    return {
      songSheetInfo: {
        tags: [],
        creator: { avatarUrl: "" },
      }, //歌单详情
      playlistTrack_params:{
          id:'',
           limit:50,//默认为当前歌单歌曲数量,限制为50首
          offset:0
      },
      playlistSong:[],//限制为50首,不分页
      subScribers: [], //收藏歌单用户
      subScribers_params: {
        //收藏用户params
        id: "",
        limit: 18,
      },
      related: [], //相关歌单
      playlist_CommentParams: { //歌单评论
        id: '',
        limit: 9,
        offset: 0,
        before: 0,
      },
      playlistComments:[]
    };
  },
  async created() {
    const id = this.$route.query.id;
    this.subScribers_params.id = id;
    this.playlistTrack_params.id=id;
    this.playlist_CommentParams.id=id;
    await this.getSongList(id);
    await this.getPlaylistTrack(this.playlistTrack_params);
    await this.getSubscribers(this.subScribers_params);
    await this.getRelated(id);
    await this.getCommentPlaylist(this.playlist_CommentParams);
  },
  computed: {
    ...mapGetters(["isPlayed"]),
  },
  methods: {
    ...mapMutations(['setIsPlayed']),
    ...mapActions(['selectPlay']),
    async getSongList(id) {
      //歌单详情
      const res = await this.$api.getSongList({ id });
      this.songSheetInfo = res.playlist;
      console.log(res);
    },
    async getPlaylistTrack(params){//歌单所有歌曲
         const res = await this.$api.getPlaylistTrack(params);
         res.songs.forEach(item=>{
             this.playlistSong.push(formatSongInfo(item))
         })
        //  console.log(res.songs)
    //   console.log(this.playlistSong);
    },
    async getSubscribers(params) {
      //歌单收藏
      const res = await this.$api.getSubscribers(params);
      this.subScribers = res.subscribers;
    //   console.log(res);
    },
    async getRelated(id) {
      //相关歌单
      const res = await this.$api.getRelated(id);
      this.related = res.playlists;
    //   console.log(res);
    },
    async getCommentPlaylist(params){
        const res =await this.$api.getCommentPlaylist(params);
        this.playlistComments=res.comments;
        // console.log(res)
    },
    rightAwayPlay(){
      if(this.isPlayed){
        this.setIsPlayed(false)
      }else{
        this.selectPlay({list:this.playlistSong})
      }
      
    }
  },
};
</script>
<style lang="less" scoped>
.w1200 {
  width: 1200px;
  margin: 12px auto;
  display: flex;
}
.song{
    /deep/.song-list{
        width: 880px;
        padding-right: 10px;
       padding-bottom: 50px;
    }
}
.sheet-main {
  width: 880px;
  min-height: 500px;
  .sheet-main-top {
    height: 280px;
    display: flex;
    .main-top-img {
      width: 280px;
      height: 100%;
      overflow: hidden;
      .el-image {
        width: 100%;
        height: 100%;
        transition: 0.5s;
      }
      .el-image:hover {
        transform: scale(1.2);
      }
    }
    .main-top-info {
      padding-left: 40px;
      flex: 1;
      h3 {
        font-size: 24px;
      }
      .user-info {
        display: flex;
        align-items: center;
        .el-image {
          width: 32px;
          height: 32px;
          border-radius: 16px;
          margin: 15px 0 10px;
        }
        span {
          margin-left: 10px;
          line-height: 57px;
          padding-top: 3px;
        }
      }
      .c9 {
        color: #999;
      }
      .descript{
        max-height: 96px;
        overflow: hidden;
      }
      .tag {
        padding-bottom: 5px;
        em {
          font-style: normal;
          padding-right: 5px;
          color: #ff641e;
          font-size: 12px;
        }
      }
      .icon {
        height: 21px;
        padding-bottom: 5px;
        span {
          padding-right: 20px;
        }
      }
      h5 {
        padding: 30px 0 10px;
        font-size: 14px;
        color: #333;
      }
    }
  }
  .sheet-main-bottom {
    height: 80px;
    padding: 30px 0 10px;
    // border-bottom: 1px solid red;
    .rm-play {
      display: flex;
      justify-content: space-between;
      .list {
        display: flex;
        height: 40px;
        span {
          font-size: 13px;
          color: #666;
          line-height: 35px;
          text-align: center;
          padding-left: 15px;
        }
      }
    }
    .play-collect {
      display: flex;
      padding-right: 10px;
      .btn {
        width: 105px;
        height: 30px;
        border-radius: 50px;
        background-color: #ff641e;
        color: #fff;
        cursor: pointer;
        text-align: center;
        line-height: 30px;
        padding-left: 18px;
        position: relative;
        i {
          position: absolute;
          font-size: 20px;
          left: 12px;
          top: 4px;
        }
      }
      .collect {
        background-color: #f0f0f0;
        color: #333;
        margin-left: 15px;
        width: 80px;
        i {
          font-size: 15px;
          top: 7px;
        }
      }
    }
  }
}
.sheet-aside {
  flex: 1;
  .sheet-asidemain {
    width: 300px;
    min-height: 200px;
    margin-top: 35px;
    padding-left: 15px;
    h4 {
      font-size: 16px;
      color: #333;
      position: relative;
      margin-left: 15px;
    }
    h4::before {
      display: block;
      content: "";
      position: absolute;
      top: 1px;
      left: -10px;
      width: 4px;
      border-radius: 3px;
      height: 20px;
      background-color: #ff641e;
    }
  }
  .asidemain-subScriber {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .el-image {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      margin: 10px 3px;
    }
  }
  .related {
    li {
      cursor: pointer;
      min-width: 300px;
      min-height: 80px;
      padding: 10px 0;
      margin-left: 10px;
      display: flex;
      .am-left {
        width: 60px;
        height: 60px;
        .el-image {
          width: 100%;
          height: 100%;
          border-radius: 4px;
        }
      }
      .am-right {
        font-size: 12px;
        color: #999;
        padding-left: 10px;
        p:nth-child(1) {
          font-size: 14px;
          color: #333;
          padding-bottom: 23px;
        }
      }
    }
  }
  .comment{
      li{
         min-width:300px;
          display: flex;
          padding: 10px 0 10px 5px;
          .comment-img{
              width: 40px;
              .el-image{
                  width: 40px;
                  height: 40px;
                  border-radius: 20px;
              }
          }
          .comment-userinfo{
              width: 260px;
              padding-left: 10px;
              color: #666;
              h5{
                  color: #333;
                  font-size: 14px;
              }
          }
          .userinfo-title{
              margin-bottom: 7px;
              span{
                  margin: 5px;
                  color: #666;
                  font-size: 12px;
                  font-weight: 500;
              }
          }
          .userinfo-comment{
              line-height: 1.6;
              padding: 5px 10px;
              font-size: 12px;
              background-color: #f4f4f4;
              border-radius: 4px;
          }
      }
  }
}
</style>
